<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">

<head>
    <th:block th:include="common/common_head :: commonHeader('询价单录入')"/>
    <link th:href="@{/static/css/plugins/cropper/cropper.min.css}" rel="stylesheet">
</head>

<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
    <form class="form-horizontal" method="post" id="inquiryHeaderForm">
        <div class="row">
            <div class="form-group">
                <div class="col-sm-8" style="margin-left: 16px">
                    <input class="btn btn-primary" type="button" onclick="save()" value="保存">
                    <button class="btn btn-primary" type="button" onclick="Dialog.closeFrame(window.name)">取 消</button>
                </div>
            </div>

            <!-- 显示 隐藏测试 -->
            <ul id="myTab" class="nav nav-tabs">
                <li class="active">
                    <a href="#basicinformation" linkTab="basicinformation" isActive="true" data-toggle="tab"> 基础信息</a>
                </li>
                <li>
                    <a href="#materialformation" linkTab="materialformation" data-toggle="tab"> 物料信息</a>
                </li>
                <li>
                    <a href="#vendorformation" linkTab="vendorformation" data-toggle="tab"> 供应商基本信息</a>
                </li>
            </ul>

            <!-- 基本信息 -->
            <div id="basicinformation">
                <div class="ibox float-e-margins">
                    <div class="ibox-content">
                        <div class="form-group">
                            <input type="hidden" name="inquiryId" th:value="${inquiryHeaderEntity.inquiryId}">
                            <label class="col-xs-1 control-label"><span class="required-sign">*</span>汇总号2：</label>
                            <div class="col-xs-3">
                                <input name="inquiryTotalCode" th:value="${inquiryHeaderEntity.inquiryTotalCode}"
                                       type="text" placeholder="汇总号" class="form-control" readonly="readonly">
                            </div>
                            <label class="col-xs-1 control-label">公司代码：</label>
                            <div class="col-xs-3">
                                <select class="form-control" id="companyCode" name="companyCode"
                                        th:data-val="${inquiryHeaderEntity.companyCode}" sysDict="GC"
                                        emptyFirst="true"></select>
                            </div>
                            <label class="col-xs-1 control-label">采购组织</label>
                            <div class="col-xs-3">
                                <select class="form-control required" title="请输入采购组织" id="purchaseOrg"
                                        name="purchaseOrg" th:data-val="${inquiryHeaderEntity.purchaseOrg}"
                                        sysDict="CGZZ" emptyFirst="true"></select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-1 control-label"><span class="required-sign">*</span>采购组：</label>
                            <div class="col-sm-3">
                                <select class="form-control required" id="purchaseGrp" name="purchaseGrp"
                                        th:data-val="${inquiryHeaderEntity.purchaseGrp}" title="请输入采购组织" sysDict="CGZ"
                                        emptyFirst="true"></select>
                            </div>
                            <label class="col-sm-1 control-label">语言编码：</label>
                            <div class="col-sm-3">
                                <input class="form-control required" name="language"
                                       th:value="${inquiryHeaderEntity.language}" title="请输入语言编码" type="text"
                                       placeholder="地址">
                            </div>
                            <label class="col-sm-1 control-label">货币：</label>
                            <div class="col-sm-3">
                                <select class="form-control required" title="请输入货币" id="currency" name="currency"
                                        th:data-val="${inquiryHeaderEntity.currency}" sysDict="BZ"
                                        emptyFirst="true"></select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-1 control-label">询价开始日期：</label>
                            <div class="col-sm-3">
                                <input class="form-control required" title="询价开始日期" name="beginDate"
                                       th:value="${inquiryHeaderEntity.beginDate}" id="beginDate" type="text"
                                       placeholder="询价开始日期">
                            </div>
                            <label class="col-sm-1 control-label">报价截止日期：</label>
                            <div class="col-sm-3">
                                <input class="form-control required" title="报价截止日期" name="endDate"
                                       th:value="${inquiryHeaderEntity.endDate}" id="endDate" type="text"
                                       placeholder="报价截止日期">
                            </div>
                            <label class="col-sm-1 control-label">抬头备注</label>
                            <div class="col-sm-3">
                                <input name="remark" th:value="${inquiryHeaderEntity.remark}" type="text"
                                       placeholder="抬头备注" class="form-control">
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 物料信息 -->
            <div id="materialformation" style="display:none;">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <!-- <button type="button" class="btn  btn-rounded btn-sm" onclick='addtr("materialformation")'><i class="fa fa-plus"></i>&nbsp;添加</button> -->
                    </div>
                    <div class="table-responsive">
                        <table class="table table-bordered text-nowrap" id="para_table">
                            <thead>
                            <tr>
                                <th>物料编码</th>
                                <th>采购申请编码</th>
                                <th>物料描述</th>
                                <th>数量</th>
                                <th>采购订单单位</th>
                                <th>交货日期</th>
                                <th>工厂</th>
                                <th>库存地点</th>
                                <th>物料组</th>
                                <th>参考PR</th>
                                <th>参考行项目</th>
                                <th>项目备注</th>
                                <th></th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr th:each="InquiryItemEntity : ${itemlist}">
                                <td style="display:none"><input name="inquiryItemId" type="hidden"
                                                                th:value="${InquiryItemEntity.inquiryId}"/></td>
                                <td width='110px'><input style='width:95%' name='materialCode'
                                                         th:value="${InquiryItemEntity.materialCode}"/></td>
                                <td width='110px'><input style='width:95%' name='requestCode'
                                                         th:value="${InquiryItemEntity.requestCode}"/></td>
                                <td width='110px'><input style='width:95%' name='materialDesc'
                                                         th:value="${InquiryItemEntity.materialDesc}"/></td>
                                <td width='110px'><input style='width:95%' type='text' name='purchaseCnt'
                                                         th:value="${InquiryItemEntity.purchaseCnt}"/></td>
                                <td width='110px'><input style='width:95%' type='text' name='poUnit'
                                                         th:value="${InquiryItemEntity.poUnit}"/></td>
                                <td width='110px'><input style='width:95%' type='text' name='deliveryDate'
                                                         th:value="${InquiryItemEntity.deliveryDate}"/></td>
                                <td width='110px'><input style='width:95%' type='text' name='werks'
                                                         th:value="${InquiryItemEntity.werks}"/></td>
                                <td width='110px'><input style='width:95%' type='text' name='storageLocation'
                                                         th:value="${InquiryItemEntity.storageLocation}"/></td>
                                <td width='110px'><input style='width:95%' type='text' name='materialGroup'
                                                         th:value="${InquiryItemEntity.materialGroup}"/></td>
                                <td width='110px'><input style='width:95%' type='text' name='purchRequestCode'
                                                         th:value="${InquiryItemEntity.purchRequestCode}"/></td>
                                <td width='110px'><input style='width:95%' type='text' name='purchRequestItemCode'
                                                         th:value="${InquiryItemEntity.purchRequestItemCode}"/></td>
                                <td width='110px'><input style='width:95%' type='text' name='remark'
                                                         th:value="${InquiryItemEntity.remark}"/></td>
                                <td width='110px'></td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <!-- 供应商信息 -->
            <div id="vendorformation" style="display:none;">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <!-- <button type="button" class="btn btn-xs btn-link" onclick='addtr("vendorformation")'>添加</button> -->
                        <!-- <button type="button" class="btn  btn-rounded btn-sm" onclick='addtr("vendorformation")'><i class="fa fa-plus"></i>&nbsp;添加</button> -->
                    </div>
                    <div class="table-responsive">
                        <table class="table table-bordered text-nowrap" id="vendor_table">
                            <thead>
                            <tr>
                                <th>供应商编码</th>
                                <th>供应商名称</th>
                                <th>付款条件</th>
                                <th>国际贸易条款</th>
                                <th>操作</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr th:each="InquiryVendorEntity : ${vendorlist}">
                                <td style="display:none"><input name="inquiryItemId" type="hidden"
                                                                th:value="${InquiryVendorEntity.inquiryId}"/></td>
                                <td width='110px'><input style='width:95%' type='text' name='vendorCode'
                                                         th:value="${InquiryVendorEntity.vendorCode}"/></td>
                                <td width='110px'><input style='width:95%' type='text' name='vendorName'
                                                         th:value="${InquiryVendorEntity.vendorName}"/></td>
                                <td width='110px'><input style='width:95%' name='payTermsPurchase'
                                                         th:value="${InquiryVendorEntity.payTermsPurchase}"
                                                         readonly="readonly"/></td>
                                <td width='110px'><input style='width:95%' name='i18nTradeTerms'
                                                         th:value="${InquiryVendorEntity.i18nTradeTerms}"
                                                         readonly="readonly"/></td>
                                <td width='110px'></td>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document" style="width:70%">
        <div class="modal-content" style="height:700px">
            <form id="materialFactoryForm" th:action="@{/materialFactory/listVo}" class="form-inline">
                <div class="modal-header" style="height:10%">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">物料选择</h4>
                </div>
                <div class="modal-body">
                    <div style="height: 30px">
                        <ul>
                            <li class="col-sm-3" style="width: 33%">
                                <label>物料号：</label>
                                <input name="materialCode" type="text" id="materialCode" placeholder="物料号"
                                       class="form-control">
                            </li>
                            <li class="col-sm-3" style="width: 33%">
                                <label>物料描述：</label>
                                <input name="materialDesc" type="text" id="materialDesc" class="form-control"
                                       placeholder="物料描述">
                            </li>
                            <li class="col-sm-3" style="width: 33%">
                                <button id="materialFactorySearchBtn" type="button"
                                        class="btn btn-primary btn-rounded btn-sm"><i class="fa fa-search"></i>&nbsp;搜索
                                </button>
                                <button class="btn btn-warning btn-rounded btn-sm" type="reset"><i
                                        class="fa fa-eraser"></i>&nbsp;重置
                                </button>
                            </li>
                        </ul>
                    </div>

                    <table id="materialFactory" class="table table-bordered"></table>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" onclick='check_form("materialFactory")'>确定</button>
                </div>
            </form>
        </div>
    </div>
</div>
<!-- Modal Vendor -->
<div class="modal fade" id="myModalVendor" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document" style="width:70%">
        <div class="modal-content" style="height:700px">

            <form id="vendorForm" th:action="@{/vendor/findSimplePage}" class="form-inline">
                <div class="modal-header" style="height:10%">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">供应商选择</h4>
                </div>
                <div class="modal-body">
                    <div style="height: 30px">
                        <ul>
                            <li class="col-sm-3" style="width: 33%">
                                <label>供应商编码：</label>
                                <input name=sapCode type="text" id="sapCode" class="form-control" placeholder="供应商编码">
                            </li>
                            <li class="col-sm-3" style="width: 33%">
                                <label>供应商名称：</label>
                                <input name="vendorName" type="text" id="vendorName" class="form-control"
                                       placeholder="供应商名称">
                            </li>
                            <li class="col-sm-3" style="width: 33%">
                                <button id="vendorSearchBtn" type="button" class="btn btn-primary btn-rounded btn-sm"><i
                                        class="fa fa-search"></i>&nbsp;搜索
                                </button>
                                <button class="btn btn-warning btn-rounded btn-sm" type="reset"><i
                                        class="fa fa-eraser"></i>&nbsp;重置
                                </button>
                            </li>
                        </ul>
                    </div>
                    <table id="vendor" class="table table-bordered"></table>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" onclick='check_form("vendor")'>确定</button>
                </div>
            </form>

        </div>
    </div>
</div>

<!--引入公共js-->
<div th:include="common/onload_js :: onloadJS"></div>
<!-- Chosen -->
<script th:src="@{/static/js/plugins/chosen/chosen.jquery.js}"></script>

<script type="text/javascript">

    $(function () {
        //初始化选项卡
        initTabBar("myTab");

        // 初始化时间插件
        laydate.render({elem: '#beginDate'});
        laydate.render({elem: '#endDate'});
        //laydate.render({elem: '#deliveryDate'});
        //初始化所有字典数据
        initDictDataSel();
    });

    var materialCode = "";
    var materialDesc = "";
    var werks = "";
    var materialGroup = "";
    var id;

    function check_form(obj) {
        //使用getSelections即可获得，row是json格式的数据
        var rows = $("#" + obj).bootstrapTable('getSelections');
        //判断是否选中行
        if (!rows || rows.length == 0) {
            Dialog.alert("请先选中一行！")
            return;
        }
        showTableData(rows[0], obj);
    }

    function showTableData(json, obj) {
        if ("vendor" == obj) {
            //$("#vendor_table").bootstrapTable('removeAll');
            $("#vendor_table td input[id='sapCode" + id + "']").val(json.sapCode);
            $("#vendor_table td input[id='" + "vendorName" + id + "']").val(json.vendorName);
            $("#vendor_table td select[id='payCondition" + id + "']").val(json.payCondition);
            $("#vendor_table td select[id='i18nTradeTerms" + id + "']").val(json.i18nTradeTerms);
            $('#myModalVendor').modal('hide');
        }
        if ("materialFactory" == obj) {
            //$("#para_table").bootstrapTable('removeAll');
            $("#para_table td input[id='materialCode" + id + "']").val(json.materialFactoryEntity.materialCode);
            $("#para_table td input[id='materialDesc" + id + "']").val(json.materialEntity.materialDesc);
            $("#para_table td select[id='werks" + id + "']").val(json.materialFactoryEntity.werks);
            $("#para_table td input[id='materialGroup" + id + "']").val(json.materialFactoryEntity.werks);
            $('#myModal').modal('hide');
        }
    }

    Searcher.createBS('#materialFactory',
        [
            {radio: true},
            {title: "物料号", field: "materialFactoryEntity.materialCode"},
            {title: "物料描述", field: "materialEntity.materialDesc"},
            {title: "工厂", field: "materialFactoryEntity.werks"},
            {title: "物料组", field: "materialEntity.materialGroup"}
        ], {pageList: [10], pageSize: 10, showColumns: false, showRefresh: false}
    );
    Searcher.createBS('#vendor',
        [
            {radio: true},
            {title: "供应商编码", field: "sapCode"},
            {title: "供应商名称", field: "vendorName"},
            {title: "付款条件", field: "payCondition"}
        ], {pageList: [10], pageSize: 10, showColumns: false, showRefresh: false}
    );

    //新增行
    var index = 0;
    var index1 = 0;

    function addtr(obj) {
        if ("vendorformation" == obj) {
            var mydate = new Date();
            var uuid = "rdn" + mydate.getDay() + mydate.getHours() + mydate.getMinutes() + mydate.getSeconds() + mydate.getMilliseconds();//根据时间来自动生成uuid，保证生成的id是唯一的
            var trCode = "<tr>";
            trCode += "<td><input id='sapCode" + index1 + "' name='sapCode' readonly='readonly' data-ids='" + index1 + "' data-toggle='modal' data-target='#myModalVendor' /></td>";
            trCode += "<td><input id='vendorName" + index1 + "' style='width:95%' name='vendorName' readonly='readonly' /></td>";
            trCode += "<td><select id='payCondition" + index1 + "' style='width:95%' name='payCondition' class='form-control required' title='请输入付款条款' disabled='true' dictType='FKTJ' emptyFirst='true'></select></td>";
            trCode += "<td><select id='i18nTradeTerms" + index1 + "' style='width:95%' name='i18nTradeTerms' class='form-control required' title='请输入国际贸易条款' disabled='true' dictType='GJMYTK' emptyFirst='true'/></td>";
            trCode += "<td  align='center' onclick='deletetr(this)'><button type='button' class='btn btn-xs btn-link'>" + "删除" + "</button></td>";
            trCode += "</tr>";
            $("#vendor_table tbody").append(trCode);
            index1 = index1 + 1;
            $('#myModalVendor').on('show.bs.modal', function (event) {
                var b = $(event.relatedTarget) // relatedTarget 事件属性返回与事件的目标节点相关的节点。
                var ids = b.context.dataset.ids;
                id = ids;
            })
        }
        if ("materialformation" == obj) {
            var trCode = "<tr>";
            trCode += "<td><input id='materialCode" + index + "' name='materialCode' readonly='readonly' data-ids='" + index + "' data-toggle='modal' data-target='#myModal' /></td>";
            trCode += "<td><input id='materialDesc" + index + "' name='materialDesc' readonly='readonly' title='物料描述' style='width:95%' /></td>";
            trCode += "<td><input style='width:95%' name='purchaseCnt' class='required' title='请输入数量' /></td>";
            trCode += "<td><input style='width:95%' name='poUnit' class='required' title='请输入计量单位' /></td>";
            trCode += "<td><input style='width:95%' id='deliveryDate" + index + "' name='deliveryDate' class='form-control' title='请输入交货日期' /></td>";
            trCode += "<td><select style='width:95%' id='werks" + index + "' name='werks' class='form-control required' title='请输入工厂' disabled='true' dictType='GC' emptyFirst='true'></select></td>";
            trCode += "<td><input style='width:95%' type='text' name='storageLocation' class='required' title='请输入库存地点' /></td>";
            trCode += "<td><input style='width:95%' id='materialGroup" + index + "' readonly='readonly' name='materialGroup' /></td>";
            trCode += "<td><input style='width:95%' type='text' name='purchRequestCode' /></td>";
            trCode += "<td><input style='width:95%' type='text' name='purchRequestItemCode' /></td>";
            trCode += "<td><input style='width:95%' type='text' name='remark' /></td>";
            trCode += "<td  align='center' onclick='deletetr(this)'><button type='button' class='btn btn-xs btn-link'>" + "删除" + "</button></td>";
            trCode += "</tr>";
            $("#para_table tbody").append(trCode);
            laydate.render({elem: '#deliveryDate' + index});
            index = index + 1;
            $('#myModal').on('show.bs.modal', function (event) {
                //这里需要注意的一个地方就是event.relatedTarget，这个方法的作用就是返回与事件的目标节点相关的节点。，而在这里与其相关的节点就是触发事件的button按钮。
                //在上面的图片上我们可以看到button中有很多属性，仔细找会发现，在context中有一条dataset即数据集，里面就存放着我们想要的ids，
                //刚开始我尝试了a.dataset.ids、a.dataset(‘ids’)、a.dataset.getattribute(‘ids’)。等等方法都找不到，
                //明明在dataset中已经有这个属性了，为什么还是找不到呢，后来发现因为dataset的外层还包了一个context，
                //最终通过a.context.dataset.ids;的方法得到了该属性，通过这里我猜测这个得到的button的结构类型是json类型。
                // 在这里需要一提的是，所引用的jquery版本不同，会导致Cannot read property ‘dataset’ of undefined的错误，本次我所使用的的jquery版本是1.10.2，而换成3.2.1的时候就会出错。
                var a = $(event.relatedTarget) // relatedTarget 事件属性返回与事件的目标节点相关的节点。
                var ids = a.context.dataset.ids;
                id = ids;
            });
        }
        fillDictDataSel();//自动往select框里面填充字典数据
    }

    function deletetr(tdobject) {
        $(tdobject).parents("tr").remove();
    }

    function save() {
        //回填下拉数据
        //required:true
        if ($("#inquiryHeaderForm").valid()) {
            var data = {
                "inquiryHeaderEntity": {},
                "inquiryItemEntitylist": [],
                "vendorInfolist": [],
                "filenames": filenames
            };//先定义数据结构，head是一个对象，item是一个数组
            //得到head div 下的 input select
            var dataTitle = $("#basicinformation").find("input, select");
            dataTitle.each(function (index, item) {//循环遍历，把head的内容塞进head对象
                //这里进行数据校验
                if ($(item).val() != "undefined" && $(item).val() != null && $(item).val() != "") {
                    data.inquiryHeaderEntity[$(item).attr("name")] = $(item).val();
                }
            });
            if (JSON.stringify(data.inquiryHeaderEntity) == "{}") {
                delete data.inquiryHeaderEntity;
            }
            //得到物料行项目数据
            var trs = $("#para_table").find("tr");
            trs.each(function (index, tr) {//循环遍历，把item的内容塞进一个item对象，然后加到数组里
                var itemEntity = {};
                var its = $(tr).find("input, select");
                its.each(function (idx, it) {//循环遍历，把item的内容塞进一个item对象，然后加到数组里
                    itemEntity[$(it).attr("name")] = $(it).val();
                });
                if (JSON.stringify(itemEntity) != "{}") {
                    data.inquiryItemEntitylist.push(itemEntity);
                }
            });
            //得到供应商行项目数据
            var trs = $("#vendor_table").find("tr");
            trs.each(function (index, tr) {//循环遍历，把item的内容塞进一个item对象，然后加到数组里
                var itemEntity = {};
                var its = $(tr).find("input, select");
                its.each(function (idx, it) {//循环遍历，把item的内容塞进一个item对象，然后加到数组里
                    itemEntity[$(it).attr("name")] = $(it).val();
                });
                if (JSON.stringify(itemEntity) != "{}") {
                    data.vendorInfolist.push(itemEntity);
                }
            });
            if (data.vendorInfolist.length == 0) {
                delete data.vendorInfolist;
                var r = confirm("警告 : 请添加供应商信息");
                if (r == true) {
                    document.write("确认");
                }
            } else {
                if (data.inquiryItemEntitylist.length == 0) {
                    delete data.inquiryItemEntitylist;
                    var r = confirm("警告 : 请添物料信息");
                    if (r == true) {
                        document.write("确认");
                    }
                } else {
                    //点击保存后上传
                    $("#input-id").fileinput("upload");
                    $.ajax({
                        type: "POST",
                        url: ctxPath + "/inquiryHeader/update",
                        data:  JSON.stringify(data),//必须
                        contentType: "application/json;charsetset=UTF-8",//必须
                        dataType: "json",//必须
                        success: function (data) {
                            Dialog.msg("新增成功!", function () {
                                Dialog.closeFrame(window.name)
                            });
                        },
                        error: function (request) {
                            showTipAlert("Connection error");
                        }

                    });
                }
            }
        }
    }
</script>

</body>
</html>
